<template>
  <div class="cart" v-if="cartList">
    <div class="header">
      <div class="header-item">
        <div class="passed"><van-icon name="passed" /></div>
        100%正品保证
      </div>
      <div class="header-item">
        <div class="passed"><van-icon name="passed" /></div>
        所有商品精挑细选
      </div>
      <div class="header-item">
        <div class="passed"><van-icon name="passed" /></div>
        售后无忧
      </div>
    </div>
    <div class="header2">
      <div class="container">
        <div class="count">
          购物数量<span>{{ cartList.length }}</span>
        </div>
        <div class="manage" v-if="cartList.length != 0" @click="manageStatus">
          {{ manage ? "管理" : "取消" }}
        </div>
      </div>
    </div>

    <div v-if="cartList.length != 0">
      <van-submit-bar
        :price="allValue"
        button-text="立即下单"
        @submit="onSubmit"
        v-if="manage"
      >
        <van-checkbox v-model="checked" @click="checkAll"
          >全选({{ allCount }})</van-checkbox
        >
      </van-submit-bar>

      <van-submit-bar v-if="!manage" class="cancel-manage">
        <van-checkbox v-model="checked" @click="checkAll"
          >全选({{ allCount }})</van-checkbox
        >
        <template #button>
          <div class="manage-btn">
            <button class="scang" @click="shoucang">收藏</button>
            <button class="schu" @click="delgood">删除</button>
          </div>
        </template>
      </van-submit-bar>

      <van-checkbox-group
        @change="checkboxChange"
        v-model="result"
        ref="checkboxGroup"
      >
        <div class="goodBox" v-for="(item, index) in cartList" :key="item.id">
          <div class="container">
            <van-checkbox :name="index"></van-checkbox>
            <router-link :to="`/detail/${item.product_id}`">
              <van-card
                :price="item.truePrice"
                :desc="item.productInfo.attrInfo.suk"
                :title="item.productInfo.store_name"
                :thumb="item.productInfo.image"
              >
                <template #num>
                  <van-stepper
                    @change="stepChange(item.cart_num, item.id)"
                    v-model="item.cart_num"
                  />
                </template>
              </van-card>
            </router-link>
          </div>
        </div>
      </van-checkbox-group>
    </div>

    <div class="nogood" v-else>
      <!-- <NoGood></NoGood> -->
    </div>
  </div>
</template>

<script>
// import NoGood from "../components/NoGood.vue";
import { mapActions, mapGetters } from "vuex";
import { Toast } from "vant";
export default {
  name: "Cart",
  data() {
    return {
      checked: false,
      result: [],
      // cartList: null,
      allCount: 0,
      allValue: 0,
      manage: true,
    };
  },
  props: {},
  created() {
    this.getCartList();
  },
  computed: {
    // ...mapState(["cartList"]),
    ...mapGetters(["cartList"]),
  },
  methods: {
    checkAll() {
      if (this.checked) {
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.$refs.checkboxGroup.toggleAll();
      }
    },
    onSubmit() {
      let sendId = [];
      for (let i = 0; i < this.result.length; i++) {
        let index = this.result[i];
        sendId.push(this.cartList[index].id);
      }
      if (sendId.length != 0) {
        // this.$router.push({
        //   path: "/submit",
        //   query: { id: sendId },
        // });
        this.$router.push(`/submit/${sendId}`)
      }
    },
    checkboxChange() {
      this.calcuTotal();
      if (this.cartList.length == this.result.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    calcuTotal() {
      let allmoney = 0;
      let allnum = 0;
      for (let i = 0; i < this.result.length; i++) {
        let index = this.result[i];
        allnum += this.cartList[index].cart_num;
        allmoney +=
          this.cartList[index].truePrice * this.cartList[index].cart_num;
      }
      this.allValue = allmoney * 100;
      this.allCount = allnum;
    },
    stepChange(value, detail) {
      this.calcuTotal();
      this.$axios
        .post("api/cart/num", {
          id: detail,
          number: value,
        })
        .then();
    },
    manageStatus() {
      this.manage = !this.manage;
    },
    delgood() {
      // console.log(this.result)
      for (let i = 0; i < this.result.length; i++) {
        let index = this.result[i];
        let id = this.cartList[index].id;
        this.axios
          .post("api/cart/del", {
            ids: id,
          })
          .then((d) => {
            if (d.data.status == 200) {
              Toast("删除成功");
              this.getCartList();
              this.$refs.checkboxGroup.toggleAll(false);
            }
          });
      }
    },
    shoucang() {
      // console.log(this.result);
      let ids = [];
      for (let i = 0; i < this.result.length; i++) {
        let index = this.result[i];
        ids.push(this.cartList[index].product_id);
      }
      console.log(ids);
      this.axios
        .post("api/collect/all", {
          category: "product",
          id: ids,
        })
        .then((d) => {
          if (d.data.status == 200) {
            Toast("收藏成功");
            this.$refs.checkboxGroup.toggleAll(false);
          }
        });
    },
    ...mapActions(["getCartList"]),
  },
  components: {
    // NoGood,
  },
};
</script>

<style lang="less">
.cart {
  background-color: #f2f2f2;
  height: 100vh;
  .van-checkbox__icon--checked .van-icon {
    background-color: #fc4141;
    border-color: #fc4141;
  }
  .container {
    padding: 0rem 1rem;
  }
  .header {
    display: flex;
    background-color: #f4f4f4;
    height: 2.5rem;
    align-items: center;
    color: #a0a0a0;
    font-size: 0.4rem;
    justify-content: space-around;
    .header-item {
      display: flex;
      align-items: flex-end;
      .passed {
        margin-right: 0.3rem;
      }
    }
  }
  .header2 {
    background-color: white;
    height: 2.5rem;
    color: #3d3d3d;
    .container {
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 0.9rem;
      .count {
        span {
          color: #fc4141;
          margin-left: 0.4rem;
        }
      }
      .manage {
        margin-left: auto;
        border: 1px solid #3d3d3d;
        padding: 0.02rem 0.5rem;
      }
    }
  }
  .van-submit-bar {
    padding-bottom: 3.1rem;
  }
  .cancel-manage {
    .van-submit-bar__bar {
      color: black;
      justify-content: space-between;
      .manage-btn {
        .scang,
        .schu {
          text-align: center;
          background-color: white;
          padding: 0.2rem 1.2rem;
          border-radius: 1rem;
          border: 0.1rem solid #fc4141;
          font-size: 0.8rem;
          color: #fc4141;
        }
        .scang {
          margin-right: 0.5rem;
        }
        .schu {
          border: 0.1rem solid #9d9d9d;
          color: #9d9d9d;
        }
      }
    }
  }
  .goodBox {
    .container {
      display: flex;
      background-color: #fafafa;
      & > a {
        width: 95%;
      }
    }
    .van-card {
      padding: 0.3rem 0rem;
    }
    .van-card__title {
      font-size: 0.9rem;
      color: black;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .van-card__desc {
      font-size: 0.8rem;
      margin-top: 0.6rem;
    }
    .van-card__price {
      font-size: 1rem;
      letter-spacing: 0.1rem;
    }
    .van-card__bottom {
      display: flex;
      align-items: center;
      .van-card__num {
        margin-left: auto;
      }
    }
    .van-card__content {
      justify-content: space-around;
    }
    .van-card__thumb {
      width: 5rem;
      height: 5rem;
      .van-image {
        img {
          object-fit: contain !important;
        }
      }
    }
    .van-checkbox {
      width: 2rem;
    }
  }
  .nogood {
    padding-top: 1rem;
  }
  .van-checkbox-group {
    margin-bottom: 6.6rem;
    .goodBox {
      margin-top: 0.4rem;
    }
  }
}
.cart .van-submit-bar{
  padding-bottom: 0px ;
}
</style>